<style lang="less" scoped>
.eval_wrap {
  position: absolute;
  top: 0.88rem;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  overflow-y: auto;
  .evaluation_list {
    .evaluation_label {
      padding: 0.07rem 0.32rem 0.68rem;
      display: flex;
      flex-wrap: wrap;
      background: #fff;
      span {
        flex-direction: row;
        display: inline-block;
        padding: 0.16rem 0.2rem;
        background: #fceae8;
        border-radius: 6px;

        color: #131514;
        margin-right: 0.2rem;
        margin-top: 0.22rem;
      }
    }
    .list_box {
      padding: 0 0.3rem;
      margin-top: 0.16rem;
      background: #fff;
      border-bottom: 1px solid #c3c3c3;
      .list_num {
        .list_title {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          .left {
            width: 50%;
            img {
              width: 0.52rem;
              height: 0.52rem;
              border-radius: 50%;
              float: left;
              margin-top: 0.32rem;
            }
            span {
              float: left;
              margin-top: 0.46rem;
              margin-left: 0.14rem;
              font-size: 0.28rem;
              color: #131614;
            }
          }
          .right {
            width: 50%;
            span {
              float: right;
              margin-top: 0.47rem;
              font-size: 0.26rem;
              color: #989898;
            }
          }
        }
        .list_txt {
          margin-top: 0.24rem;
          font-size: 0.28rem;
          color: #555555;
          line-height: 0.39rem;
        }
      }
      .list_image {
        margin-top: 0.15rem;
        img {
          width: 30%;
          height: 2rem;
          margin-left: 2%;
        }
      }
      .list_model {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        color: #a4a4a4;
        font-size: 0.25rem;
        padding: 0.16rem 0 0.28rem;
        .model_style {
          margin-left: 0.3rem;
        }
      }
    }
  }
}
</style>
<template>
  <div class="eval_box">
    <v-header title="评论">
      <span slot="left" class="back_icon"></span>
    </v-header>
    <div class="eval_wrap" :style="{top:interactive.statusBarHeight.height}"  ref="eval_wrap">
      <div class="evaluation_list">
        <!--<div class="evaluation_label">-->
          <!--<span>手机不错(127)</span> -->
          <!--<span>速度快(74)</span>-->
          <!--<span>手感好(73)</span>   -->
        <!--</div>-->
        <!-- 评论遍历容器 -->

        <div class="list_box" v-for="(eval,idx) in eval_list" :key="idx">
          <div class="list_num">
            <div class="list_title">
              <div class="left">
                <img src="../../assets/img/miao.png">
                <span>{{eval.userId}}</span>
              </div>
              <div class="right">
                <span>{{eval.createTime}}</span>
              </div>
            </div>
            <p class="list_txt">{{eval.content}}</p>
          </div>
          <div class="list_image">
            <img class="previewer-demo-img" v-for="(img, index) in (eval.images).split(',')" :key="index" :src="img" width="100" @click="show(index)">
            <div v-transfer-dom>
              <previewer :list="list" ref="previewer" :options="options" @on-index-change="logIndexChange"></previewer>
            </div>
          </div>
          <div class="list_model">
            <div class="model_color">
              <span class="left">颜色：</span>
              <span class="right">金色</span>
            </div>
            <div class="model_style">
              <span class="left">款式：</span>
              <span class="right">64GB【移动联通电信4G手机】</span>
            </div>
          </div>
        </div>
      </div>
      <load-more v-show="loadFlag" :show-loading="false" tip='我是有底线的' background-color="#fbf9fe"></load-more>
    </div>
  </div>
</template>
<script>
import { TransferDom, GroupTitle } from "vux";
import { Previewer } from "vux";
import { XImg,LoadMore,Loading  } from "vux";
import {mapActions,mapState} from 'vuex'
import { setInterval, setTimeout } from 'timers';
const imgList = [
  "phone.png",
  "alipay_icon.png",
  "http://placeholder.qiniudn.com/800x300/8AEEB1/ffffff"
];
const demoList = imgList.map((one, index) => ({
  url: "javascript:",
  img: one
}));

export default {
  directives: {
    TransferDom
  },
  components: {
    TransferDom,
    GroupTitle,
    Previewer,
    LoadMore,
    Loading
  },
  data() {
    return {
      //顶部菜单自定义宽度
      getBarWidth: function(index) {
        return (index + 1) * 22 + "px";
      },
      demo03_list: demoList,
      list: [
        {
          msrc:
            "http://ww1.sinaimg.cn/thumbnail/663d3650gy1fplwu9ze86j20m80b40t2.jpg",
          src:
            "http://ww1.sinaimg.cn/large/663d3650gy1fplwu9ze86j20m80b40t2.jpg"
        },
        {
          msrc:
            "http://ww1.sinaimg.cn/thumbnail/663d3650gy1fplwvqwuoaj20xc0p0t9s.jpg",
          src:
            "http://ww1.sinaimg.cn/large/663d3650gy1fplwvqwuoaj20xc0p0t9s.jpg"
        },
        {
          msrc:
            "http://ww1.sinaimg.cn/thumbnail/663d3650gy1fplwwcynw2j20p00b4js9.jpg",
          src:
            "http://ww1.sinaimg.cn/large/663d3650gy1fplwwcynw2j20p00b4js9.jpg"
        }
      ],
      options: {
        getThumbBoundsFn(index) {
          // find thumbnail element
          let thumbnail = document.querySelectorAll(".previewer-demo-img")[
            index
          ];
          // get window scroll Y
          let pageYScroll =
            window.pageYOffset || document.documentElement.scrollTop;
          // optionally get horizontal scroll
          // get position of element relative to viewport
          let rect = thumbnail.getBoundingClientRect();
          // w = width
          return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
          // Good guide on how to get element coordinates:
          // http://javascript.info/tutorial/coordinates
        }
      },
      eval_list:[],
      page:'1',
      loadFlag:false,
        loadInx:0,
    };
  },
    activated() {
    this._getEvalList()

    let eval_wrap = this.$refs['eval_wrap']
    eval_wrap.addEventListener('scroll',e=>{ //监听container滚动到底部 滚动到底部加载的判断条件：滚动高度 + 可视高度 >= 文档高度
      let scrollT = eval_wrap.scrollTop, //滚动高度
        offsetH = eval_wrap.offsetHeight, //可视高度
        scrollH = eval_wrap.scrollHeight, //文档高度
        isBottom = scrollT+offsetH >= scrollH
      // console.log(scrollT,offsetH,scrollH,isBottom)
      if(isBottom) this._lower()
    })
  },
  methods: {
    logIndexChange(arg) {
      console.log(arg);
    },
    show(index) {
      this.$refs.previewer.show(index);
    },
    _getEvalList () { // 拉取评论列表
      if (this.loadFlag) return // 如果已加载所有数据，则不再执行加载
      this.$vux.loading.show({
        text: 'Loading'
      })
      let params = {
        templateId: this.$route.query.templateId,
        pageNum: this.page,
        pageSize: '10'
      }
      queryJudge(params)
        .then( res => {
          let eval_list = res.body.content.list
          this.loadFlag = (eval_list.length<10)
          let _arr = this.eval_list
          let _tempArr = _arr.concat(eval_list)
          this.eval_list=_tempArr
        })
    },
    _lower(){ // 触底加载更多
      this.page++
      this._getEvalList()
    },



  },
    computed: mapState({interactive: state => state.interactive}),
};
</script>
